import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    InteractionManager,
    Text,
    ListView,
} from 'react-native';
import Common from '../common/constants';
import { List, WhiteSpace, Stepper, InputItem, Item, WingBlank} from 'antd-mobile';
import { fetchTicketList } from '../actions/ticketAction';

import BuyContainer from '../containers/BuyContainer';



export default class ViewTicketList extends React.Component{

    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2,
        });
        this.state = {
          dataSource: ds
        };
    }

    componentWillMount() {
        const {dispatch} = this.props;
        dispatch(fetchTicketList());
    }

    _renderdata(rowData) {

        let msg = '';
        for(let i = 0; i < rowData.star; i++){
            msg += 'A';
        }

        return (
          <View>
            <WhiteSpace size="lg" />
            <View style={styles.view}>
              <Image source={{uri: rowData.img}} style={styles.logo} />
              <View style={styles.viewinfo} >
                <Text style={styles.place_name}>{rowData.place_name}</Text>
                <WhiteSpace size="xl" />
                <Text style={styles.place_star}>{msg} 景区</Text>
                <WhiteSpace size="sm" />
                <Text style={styles.place_info}>{rowData.address}</Text>
              </View>
            </View>

            <List >
            {rowData.ticketarr.map((obj, i) => {
              return (
                <List.Item key={i} 
                  onClick={() => {
                    this.props.navigator.push({
                        'component': BuyContainer,
                        'leftButtonTitle' : '< 返回',
                        'navigationBarHidden' : false,
                        'title' : '购买信息',
                        'passProps': { 'id': obj.sale_id, 'sale_code' : obj.sale_code },
                        'onLeftButtonPress' : () => this.props.navigator.pop()
                    })
                  }}
                  extra={
                    (() => <Text style={styles.price}>{obj.guide_price * 0.01 + '元'}</Text>)()
                  } 
                  arrow="horizontal"
                >
                  {obj.sale_name}
                </List.Item>)
            })}
            </List>
          </View>
        );
    }

    render(){
        let { ticketList } = this.props.viewTicketListReducer;

        //console.log('render');
        //console.log(ticketList);

        return (
            <View style={styles.main}>

                {ticketList.length === 0 ? <View><Text>搜索中...</Text></View> : 
                  <ListView
                    //horizontal={false}
                    //iosalwaysBounceVertical={false}
                    automaticallyAdjustContentInsets={false}
                    //iosalwaysBounceHorizontal={false}
                    //style={{paddingTop : 0}}
                    initialListSize={1}
                    renderRow={this._renderdata.bind(this)}
                    dataSource={this.state.dataSource.cloneWithRows(ticketList)}
                    
                  />
                }
                
            </View>
               
        );
    }
}

const styles = StyleSheet.create({

    main : {
        marginTop :  65,
        //backgroundColor : 'red',
        //flexDirection: 'column',
        //height : Common.window.height - 65,
        height : Common.window.height,
        //minHeight : Common.window.height - 340,
        //flex: 1,
        //flexDirection: 'row',
        //display: 'flex',
        //justifyContent : 'flex-end',
        //justifyContent : 'space-between',
        //alignContent : 'center',
    },

    logo : {
       width : 80,
       height : 80,
       marginLeft : 10,
       marginRight : 10,
       marginBottom : 10,
       //margin : 15,
    },

    view : {
        flexDirection: 'row',
        //borderBottomWidth : 1,
        //borderBottomColor : '#cccccc',
    },

    viewinfo : {


    },

    place_name : {
        fontSize : 16,
    },

    place_info : {
        fontSize : 14,
    },

    place_star : {
        fontSize : 14,
        color : 'red',
    },

    price : {
        color : 'red',
    }
})